<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.w3.org/1999/xhtml">
<head>
    <title>错误页面</title>
    <link rel="stylesheet" href="/static/layui/css/layui.css"/>
    <script src="/static/layui/layui.all.js"></script>
    <script src="/static/jquery-3.3.1.min.js"></script>
    <style>
        /*样式初始化*/
        body{font-family:Arial, '宋体', 'Microsoft YaHei';font-size:12px;color:#333;}
        ul,ol,li,dl,dt,dd,em,p,div,h1,h2,h3,h4,form,table,tr,td,label{margin: 0;padding: 0;}
        *{padding:0; margin:0;}

        /*404*/
        .error_box{ width: 495px; margin:0 auto; margin-top: 150px;}
        .error_box .error_note{ font-size: 18px; color:#2d2d2d; padding-left: 16px; box-sizing: border-box;
            font-family: "Microsoft YaHei";margin-top: 38px;}
        .error_box .error_note p{height:30px;line-height: 30px;}

        /*500*/
        .error_wrap{width: 750px; margin:0 auto;margin-top: 60px;}
        .error_wrap .error_note{ font-size: 18px; color:#2d2d2d; box-sizing: border-box;margin-top: 15px;
            font-family: "Microsoft YaHei";}
        .code_wrap{margin-top: 15px;}
        .code_title span{font-size: 24px; font-family: "Microsoft YaHei";vertical-align: middle;}
        .d_arr , .u_arr{ display: inline-block; width: 18px; height: 18px;margin-left: 10px;vertical-align: middle;margin-top: 4px;
            cursor: pointer;}
        .d_arr{ background: url("/static/images/error/d_arr.png") no-repeat;}
        .u_arr{ background: url("/static/images/error/u_arr.png") no-repeat;}
        h2{ font-size: 24px;}
        .layui-code{
            display: none;
            height:0;
        }
    </style>
    <script type="text/javascript">
        $(document).ready(function(){
            var data = {
                status:$("#status").val(),
                error:$("#error").val(),
                message:$("#message").val(),
                stackTrace:$("#stackTrace").val()
            };
            layui.laytpl($("#template" + data.status).html()).render(data,function(html){
                $("#container").append(html);
                layui.code({
                    height: '200px' //请注意必须加px。如果该key不设定，则会自适应高度，且不会出现滚动条。
                });
            });
            $("#container").on("click","i",function(){
                $(this).toggleClass("u_arr");
                if($(".layui-code").is(":hidden")){
                    $(".layui-code").show().animate({height:235});
                }else{
                    $(".layui-code").animate({height:0},function(){
                        $(this).hide();
                    });
                }

            });
        });
    </script>
</head>
<body>
<div id="container">
    <input type="hidden" id="status" th:value="${status}">
    <input type="hidden" id="error" th:value="${message}">
    <input type="hidden" id="message" th:value="${path}">
    <textarea id="stackTrace" style="display: none;" th:value="${stackTrace}"></textarea>
</div>
</body>

</html>
<!--404页面-->
<script id="template404" type="text/html">
    <div class="error_box">
        <p><img src="/static/images/404.png"></p>
        <p class="error_note">您要访问的系统可能已被删除或者暂时不可用。</p>
    </div>
</script>
<!--500页面-->
<script id="template500" type="text/html">
    <div class="error_wrap">
        <p><img src="/static/images/500.png" style="margin-left: 50px;"></p>
        <p class="error_note">抱歉，您要访问的系统可能已被删除或者暂时不可用。</p>
        <div class="code_wrap">
            <p class="code_title"><span>异常代码</span><i class="d_arr"></i></p>
            <pre class="layui-code">
                {{d.stackTrace}}
            </pre>
        </div>
    </div>
</script>

<script id="template403" type="text/html">
    <div class="error_box" style="margin-top: 100px;">
        <p><img src="/static/images/403.png"></p>
        <div class="error_note">
            <p>错误号：403   {{d.error}}</p>
            <p>错误信息：{{d.message}}</p>
        </div>
    </div>
</script>